<template>
  <view class="content">
    <image class="logo" :src="src" ref="logo"></image>
    <view class="text-area">
      <view class="title" @click="onWhat">{{title}}</view>
    </view>
    <p>这是两种不同的跳转方式</p>
    
    <navigator url="/pages/clock/clock" hover-class="is-hover">
      <button type="default">跳转方式一</button>
    </navigator>
    
    <button size="default" class="btn" hover-class="is-hover" @click="onNav">跳转方式二</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        src: '/static/logo.png',
        title: "这是一个番茄时钟",
        logo: null
      }
    },
    // 页面生命周期，uniapp专属
    onLoad() {
      console.log("on load")
    },
    onShow() {
      console.log("on show")
    },
    onHide() {
      console.log("on hide")
    },
    // 组件生命周期，vue
    created() {
      console.log("on created")
    },
    mounted() {
      console.log("on mounted")
    },
    updated() {
      console.log("on updated")
    },
    methods: {
      // 自定义的方法，这不是生命周期
      onWhat() {
        this.title = this.title === "this is a tomato clock" ? "这是一个番茄时钟" : "this is a tomato clock"
      },
      // 自定义方法，页面跳转
      onNav() {
        uni.navigateTo({
          url: '/pages/clock/clock',
        });
      }
    }
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    display: block;
    width: 100%;
    margin: 0 0 10px 0;
  }

  .btn {
    background-color: #333333;
    color: #ffffff;
  }

  .is-hover {
    color: rgba(255, 255, 255, 0.6);
    background-color: #179b16;
    border-color: #179b16;
  }
</style>